<template>
    <div>
        <Form ref="operateForm" :model="operateForm" :label-width="120" style="width: 800px;">
            <FormItem label="现金抵扣券" prop="coupon" :rules="[{ type: 'number', message: '请输入数字', trigger: 'blur' }]">
                <InputNumber :max="10000" :min="0" v-model="operateForm.coupon" placeholder="输入抵扣金额，如：500"
                             style="width: 200px;"></InputNumber>
                <span style="margin-left: 5px;">元</span>
                <input-helper text="用于支付抵扣部分现金的优惠券，仅限新用户使用，只允许领取1张"></input-helper>
            </FormItem>
            <FormItem label="诊断有效期" prop="valid_day" :rules="[{ type: 'number', message: '请输入正整数', trigger: 'blur' }]">
                <InputNumber :max="1000" :min="0" v-model="operateForm.valid_day" placeholder="输入有效期天数，如：60"
                             style="width: 200px;"></InputNumber>
                <span style="margin-left: 5px;">天</span>
                <input-helper text="指诊断报告过期时间，达到设置时间系统自动下架该车辆；设置为0，表示无时间限制"></input-helper>
            </FormItem>
            <FormItem label="支付诊断价格" prop="diagnosis_price"
                      :rules="[{ type: 'string', message: '请输入数字', trigger: 'blur' }]">
                <Input v-model="operateForm.diagnosis_price" placeholder="输入诊断金额，如：18.80" style="width: 200px;"></Input>
                <span style="margin-left: 5px;">元</span>
                <input-helper text="指用户预览诊断报告所支付的费用，设置为0，表示平台所有车辆免费预览诊断报告"></input-helper>
            </FormItem>

            <FormItem
                    v-for="(item, index) in operateForm.appraisalPrice.items"
                    v-if="item.status"
                    :key="index"
                    :label="'鉴定价格 ' + item.index">
                <Row>
                    <Col span="4">
                        <Input type="text" v-model="item.price" placeholder="输入鉴定价格"><span
                            slot="append">元</span></Input>
                    </Col>
                    <Col span="16" offset="1">
                        <FormItem label="车辆售价区间：">
                            <Input v-model="item.low_price" placeholder="0" style="width: 100px;"></Input>
                            <span style="margin: 0 5px;">~</span>
                            <Input v-model="item.high_price" placeholder="20" style="width: 100px;"></Input>
                            <span style="margin-left: 5px;">万</span>
                        </FormItem>
                    </Col>
                    <Col span="2">
                        <Button type="error" @click="handleRemove(index)">移除</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Row>
                    <Col span="12">
                        <Button type="dashed" long @click="handleAdd" icon="md-add">添加鉴定价格区间</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="submitOperateForm('operateForm')" :loading='saveLoading'>保存</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
  import InputHelper from '_c/common/input-helper'
  import {saveOperate, getOperateParams} from '@/api/param'

  export default {
    components: {
      InputHelper
    },
    data() {
      return {
        saveLoading: false,
        operateForm: {
          id: '',
          coupon: 0,
          valid_day: 0,
          diagnosis_price: 0,
          appraisalPrice: {
            items: [
              {
                index: 1,
                status: 1,
                price: 0,
                low_price: 0,
                high_price: 0
              }
            ]
          },
        },
        index: 1,
      }
    },
    created() {
      let t = this
      t.getOperateParamsExcute()
    },
    methods: {
      getOperateParamsExcute() {
        let t = this
        getOperateParams().then(res => {
          t.operateForm.id = res.data.id
          t.operateForm.coupon = res.data.coupon
          t.operateForm.valid_day = res.data.valid_day
          t.operateForm.diagnosis_price = res.data.diagnosis_price
          t.operateForm.appraisalPrice.items = res.data.appraisal_price
          t.index = res.data.appraisal_price.length
        })
      },

      submitOperateForm(name) {
        let t = this
        t.$refs[name].validate((valid) => {
          if (valid) {
            t.saveLoading = true
            saveOperate(t.operateForm).then(res => {
              t.saveLoading = false
              t.modalShow = false
              t.$emit('on-add-modal-success')
              t.$emit('on-add-modal-hide')
              t.$Notice.success({
                title: res.message
              })
            }, function (error) {
              t.saveLoading = false;
            })
          } else {
            t.saveLoading = false
          }
        })
      },

      handleAdd() {
        this.index++;
        this.operateForm.appraisalPrice.items.push({
          price: '',
          low_price: 0,
          high_price: 0,
          index: this.index,
          status: 1
        });
      },
      handleRemove(index) {
        this.operateForm.appraisalPrice.items[index].status = 0;
      },

    }
  }
</script>
